<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-md-12">
        <b-card>
          <div slot="header">
            <strong>添加产品详细</strong>
          </div>
          <form @submit.prevent="formSubmit" ref="df">
            <input type="hidden" name="id" v-model="inputlist.id">
            <b-form-fieldset label="goodid：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" v-model="inputlist.goodid"></b-form-input>
              <!-- <b-form-input  type="text" placeholder="" :disabled="true" name="goodid" v-model="inputlist.goodid" class="col-sm-9 choose-goodsid"></b-form-input> -->
              <!-- <b-button variant="primary" class="col-sm-2 btn-goodsid" @click="chooseGoodsId()">选择goodid</b-button> -->
              <span class="tips">*</span>
              <p class="tips" v-show="proTip1">内容不能为空，请输入正确内容！</p>
            </b-form-fieldset>
            <b-form-fieldset label="goodcode：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="goodcode" v-model="inputlist.goodcode"></b-form-input>
              <span class="tips">*</span>
              <p class="tips" v-show="proTip2">内容不能为空，请输入正确内容！</p>
            </b-form-fieldset>
            <b-form-fieldset label="goodno：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="goodno" v-model="inputlist.goodno"></b-form-input>
              <span class="tips">*</span>
              <p class="tips" v-show="proTip3">内容不能为空，请输入正确内容！</p>
            </b-form-fieldset>
            <b-form-fieldset label="图片：" :label-cols="2" :horizontal="true">
              <!-- <b-form-input  type="text" placeholder="" name="image" v-model="inputlist.image"></b-form-input> -->
              <upload-image :src="inputlist.image" :upload="handleUpload" size="small"></upload-image>
            </b-form-fieldset>
            <b-form-fieldset label="产品名：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="isShow" placeholder="" name="name" v-model="inputlist.name"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="icon：" :label-cols="2" :horizontal="true">
              <!-- <b-form-input type="text" :disabled="isShow" placeholder="" name="icon" v-model="inputlist.icon"></b-form-input> -->
              <icon-selector :iconStr.sync="inputlist.icon"></icon-selector>
            </b-form-fieldset>
            <b-form-fieldset label="PDF图片：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="isShow" placeholder="" name="pdfimage" v-model="inputlist.pdfimage"></b-form-input>
              <!-- <upload-image :src="inputlist.pdfimage" :upload="handleUpload" size="small"></upload-image>               -->
            </b-form-fieldset>
            <b-form-fieldset label="PDF文件：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="isShow" placeholder="" name="pdf" v-model="inputlist.pdf"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="电子书地址：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="isShow" placeholder="" name="pdfbook" v-model="inputlist.pdfbook"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="视频地址：" :label-cols="2" :horizontal="true">
              <b-form-input type="text" :disabled="isShow" placeholder="" name="movie" v-model="inputlist.movie"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="deliveryDate：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="deliveryDate" v-model="inputlist.deliveryDate"></b-form-input>
            </b-form-fieldset>
            <p class="form-group row">
              <span class="col-sm-2"></span>
              <strong class="col-sm-9">产品参数</strong>
            </p>
            <b-form-fieldset label="材料：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="material" v-model="inputlist.material"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="RoHs：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="rohs" v-model="inputlist.rohs"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="产品重量：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="mass" v-model="inputlist.mass"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="钥匙种类：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="keykind" v-model="inputlist.keykind"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="挂锁：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="nankin" v-model="inputlist.nankin"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="安装距离：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="pitch" v-model="inputlist.pitch"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="直径：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="diameter" v-model="inputlist.diameter"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="销子：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="pin" v-model="inputlist.pin"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="长：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="length" v-model="inputlist.length"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="宽：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="width" v-model="inputlist.width"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="板厚：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="thick" v-model="inputlist.thick"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="孔：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="hole" v-model="inputlist.hole"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="偏置高度：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="offsethimax" v-model="inputlist.offsethimax"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="上推行程：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="door" v-model="inputlist.door"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="水平位置：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="horizontal" v-model="inputlist.horizontal"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="上推：" :label-cols="2" :horizontal="true">
              <b-form-input type="text"      placeholder="" name="removal" v-model="inputlist.removal"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="全长：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="maxlength" v-model="inputlist.maxlength"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="钥匙编号：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="keyno" v-model="inputlist.keyno"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="锁种类：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="lockkind" v-model="inputlist.lockkind"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="调节：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="adjust" v-model="inputlist.adjust"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="保持力(N)：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="power" v-model="inputlist.power"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="但配钥匙数量" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="differ" v-model="inputlist.differ"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="max温度：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="maxtemp" v-model="inputlist.maxtemp"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="min温度：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="mintemp" v-model="inputlist.mintemp"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="额定电压：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="volt" v-model="inputlist.volt"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="通电时：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="ratingtype" v-model="inputlist.ratingtype"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="锁样式：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="locktype" v-model="inputlist.locktype"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="车轮材质：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="wheelmaterial" v-model="inputlist.wheelmaterial"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="安装高度：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="onheight" v-model="inputlist.onheight"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="容许荷载(N)：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="allowload" v-model="inputlist.allowload"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="轴径：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为整数" name="shaftdiameter" v-model="inputlist.shaftdiameter"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="全长：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="totallength" v-model="inputlist.totallength"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="调整范围：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="shaftlength" v-model="inputlist.shaftlength"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="行程：" :label-cols="2" :horizontal="true">
              <b-form-input  type="number" placeholder="输入内容只能为数字" name="stroke" v-model="inputlist.stroke"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="status：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="status" v-model="inputlist.status"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="价格：" :label-cols="2" :horizontal="true">
              <b-form-input  type="text" placeholder="" name="price" v-model="inputlist.price"></b-form-input>
            </b-form-fieldset>
             <b-form-fieldset label="特点：" :label-cols="2" :horizontal="true">
              <textarea class="form-control col-sm-12" :rows="4"  placeholder=""  v-model="inputlist.features"></textarea>
            </b-form-fieldset>
            <b-form-fieldset label="规格：" :label-cols="2" :horizontal="true">
              <textarea class="form-control col-sm-12" :rows="4"  placeholder=""  v-model="inputlist.specifications"></textarea>
            </b-form-fieldset>
            <b-form-fieldset label="特殊用途：" :label-cols="2" :horizontal="true">
              <textarea class="form-control col-sm-12" :rows="4"  placeholder=""  v-model="inputlist.specificUse"></textarea>
            </b-form-fieldset>
            <b-form-fieldset label="备注：" :label-cols="2" :horizontal="true">
              <textarea class="form-control col-sm-12" :rows="4"  placeholder=""  v-model="inputlist.remarks"></textarea>
            </b-form-fieldset>
            <b-form-fieldset label="2D.DXF" :label-cols="2" horizontal>
              <b-form-input  type="text" placeholder="" name="dxf" v-model="inputlist.dxf"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="3D.SAT" :label-cols="2" horizontal>
              <b-form-input  type="text" placeholder="" name="sat" v-model="inputlist.sat"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="3D.STEP" :label-cols="2" horizontal>
              <b-form-input  type="text" placeholder="" name="step" v-model="inputlist.step"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="3D.X_T" :label-cols="2" horizontal>
              <b-form-input  type="text" placeholder="" name="x_t" v-model="inputlist.x_t"></b-form-input>
            </b-form-fieldset>
            <b-form-fieldset label="3D.IGS" :label-cols="2" horizontal>
              <b-form-input  type="text" placeholder="" name="igs" v-model="inputlist.igs"></b-form-input>
            </b-form-fieldset>
            <div slot="footer">
              <b-button type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> 提交</b-button>
            </div>
          </form>
        </b-card>
      </div>
    </div>
    <!--选择 goodsid-->
    <!-- <div title="Modal title" class="modal-primary" v-show="primaryModal1">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title">选择goodsid</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelModal()">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body">
                <div class="form-group row">
                      <div class="col-md-12">
                        <label class="radio-inline gidRadio" :for="item.goodsid" v-for="(item,index) in prolist" :key="index">
                          <input type="radio"
                                 :id="item.goodsid"
                                 name="radios"
                                 :value="item.goodsid"
                                 v-model="inputlist.goodid">{{ item.goodsid }}
                        </label>
                      </div>
                    </div>
              </div>
              <el-pagination
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :current-page.sync="current"
                :page-size="20"
                :total="total">
              </el-pagination>`
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelModal()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="sureGoodsId()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div> -->

    <div title="Modal title" class="modal-primary" v-show="primaryModal2">
      <span class="modal-open">
        <div class="modal fade show" role="dialog">
          <div class="modal-dialog modal-md">
            <div tabindex="-1" role="document" class="modal-content">
              <header class="modal-header">
                <h5 class="modal-title">添加产品信息</h5>
                <button type="button" aria-label="Close" class="close" @click="cancelModal()">
                  <span aria-hidden="true">×</span>
                </button>
              </header>
              <div class="modal-body">
                <br>是否确认添加产品信息？<br><br>
              </div>
              <footer class="modal-footer">
                <button type="button" class="btn btn-primary btn-md" @click="cancelModal()">取消</button>
                <button type="button" class="btn btn-danger btn-md" @click="sureAddProduct()">确认</button>
              </footer>
            </div>
          </div>
        </div>
        <div class="modal-backdrop fade show"></div>
      </span>
    </div>

  </div>
</template>

<script>
  import { addGoods, selectAllCatalogs, uploadPicToDir } from '../../service/api'
  import IconSelector from '@/components/IconSelector.vue'
  import { handleSubmitData, html2Plain, plain2Html } from '../../utils/filter-data'
  import UploadImage from '../../Components/UploadImage.vue'
  export default {
    name: 'forms',
    components: {
      IconSelector,
      UploadImage
    },
    data () {
      return {
        consult: '',
        addrSelected: 0,
        current: 1,
        currentData: [],
        radioPicked: '',
        prolist: [],
        primaryModal1: false,
        primaryModal2: false,
        isShow: false,
        proTip1: false,
        proTip2: false,
        proTip3: false,
        goodsid: '',
        totalPage: '',
        inputlist: {
          icon: '',
          image: '',
          pdfimage: ''
        }
      }
    },
    computed: {
      total () {
        return ~~this.totalPage
      }
    },
    methods: {
      cancelModal () {
        this.primaryModal1 = false
        this.primaryModal2 = false
      },
      chooseGoodsId () {
        this.primaryModal1 = true
        this.primaryModal2 = false
      },
      sureGoodsId () {
        this.primaryModal1 = false
        this.primaryModal2 = false
      },
      formSubmit () {
        if (this.inputlist.goodid === undefined || !this.inputlist.goodid.trim()) {
          this.proTip1 = true
          document.body.scrollTop = 0
          return false
        } else {
          this.proTip1 = false
        }
        if (this.inputlist.goodcode === undefined || !this.inputlist.goodcode.trim()) {
          this.proTip2 = true
          document.body.scrollTop = 0
          return false
        } else {
          this.proTip2 = false
        }
        if (this.inputlist.goodno === undefined || !this.inputlist.goodno.trim()) {
          this.proTip3 = true
          document.body.scrollTop = 0
          return false
        } else {
          this.proTip3 = false
        }
        this.primaryModal1 = false
        this.primaryModal2 = true
      },
      __html2Plain: html2Plain,
      __plain2Html: plain2Html,
      __handleSubmitData: handleSubmitData,
      async sureAddProduct () {
        const df = this.$refs.df
        const hd = this.__handleSubmitData(this.inputlist)
        const fd = new FormData(df)
        fd.append('icon', this.inputlist.icon)
        fd.append('goodid', this.inputlist.goodid.toUpperCase())
        fd.append('updateUser', localStorage.getItem('username'))
        for (const k in hd) {
          fd.append(k, hd[k])
        }
        console.log(fd)
        const { err, data } = await addGoods({ fd })
        if (err || data.code !== 200) {
          alert('添加失败')
          return false
        }
        alert('添加完成')
        this.$router.go(-1)
      },
      handleCurrentChange () {
        console.log('handleCurrentChange: ' + this.current)
        selectAllCatalogs({sid: '', goodsid: this.goodsid, currentPage: this.current, lineSize: 20})
          .then(({ data, err }) => {
            if (data.code === 200) {
              this.totalPage = data.count
              this.prolist = data.result.filter(item => item && !!item.goodsid)
            }
          })
      },
      /* 上传图片等 */
      async handleUpload (file) {
        await uploadPicToDir({ file })
      }
    },
    created () {
      selectAllCatalogs({sid: '', goodsid: this.goodsid, currentPage: 1, lineSize: 20})
        .then(({ data, err }) => {
          if (data.code === 200) {
            this.totalPage = data.count
            this.prolist = data.result.filter(item => item && !!item.goodsid)
          }
        })
    }
  }
</script>
<style>
  .form-control {
    display: inline-block;
    width: 95%;
  }
  .choose-goodsid{
    display: inline-block;
  }
  .btn-goodsid {
    vertical-align: top;
  }
  .gidRadio{
    width: 25%;
  }
  .tips{
    color: #f20000;
  }
</style>
<style scoped>
/* p.separator {
  padding-left: 10%;
} */
</style>

